<template>

  <div class="subject-content">
    <panelComponent/>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <lineChart/>
    </el-row>


    <div id="mse"></div>
  </div>


</template>
<script>

import 'xgplayer/dist/index.min.css';
import panelComponent from "@/views/default/panelComponent.vue";
import lineChart from "@/views/default/lineChart.vue";

import Player from 'xgplayer';
import HlsPlayer from 'xgplayer-hls';


export default {
  name: "Admin",
  components:{
    panelComponent,
    lineChart
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      this.player = new Player({
        id: 'mse',
        url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
        autoplay: false, //自动播放视频。当页面加载完成后，视频将自动开始播放
        playsinline: true,
        height: window.innerHeight,
        width: window.innerWidth,
        plugins: [HlsPlayer],
        events: {
          'ended': () => {
            console.log('播放结束');
          },
          'error': () => {
            console.log('播放错误');
          },
          'play': () => {
            console.log('播放中');
          },
          'pause': () => {
            console.log('暂停');
          },
          'timeupdate': () => {
            console.log('播放进度');
          },
          'waiting': () => {
          }
        }


      });
    },
  },

}
</script>

<!-- 去掉 scoped 全局生效 -->
<style scoped>

#mse {
  width: 50% !important; /* 调整为你需要的宽度 */
}


</style>
